// 数据模型定义
const exhibitionData = {
    // 顶部
    top1_1: [
        { title: "祖国啊，我亲爱的祖国", link: "https://www.cxstar.com/Book/Detail?ruid=2f9cba0900004dXXXX&packageruid=", url: "./images/pc/top1_1/祖国啊，我亲爱的祖国.jpg" },
        { title: "中国现代化进程中的价值选择", link: "https://www.cxstar.com/Book/Detail?ruid=2f6ed7a000009dXXXX&packageruid=", url: "./images/pc/top1_1/中国现代化进程中的价值选择.jpg" },
        { title: "以双循环战略转型为契机加速构建新发展格局", link: "https://www.cxstar.com/Book/Detail?ruid=2f5994aa000165XXXX&packageruid=", url: "./images/pc/top1_1/以双循环战略转型为契机加速构建新发展格局.jpg" },
        { title: "中国国家安全现代化研究", link: "https://www.cxstar.com/Book/Detail?ruid=2f59941d000161XXXX&packageruid=", url: "./images/pc/top1_1/中国国家安全现代化研究.jpg" },
        { title: "青年的回响：二十二位留学生的责任担当", link: "https://www.cxstar.com/Book/Detail?ruid=2f52f3f30000f1XXXX&packageruid=", url: "./images/pc/top1_1/青年的回响：二十二位留学生的责任担当.jpg" },
        { title: "中国式现代化与中华优秀传统价值观", link: "https://www.cxstar.com/Book/Detail?ruid=2f49e9c7000045XXXX&packageruid=", url: "./images/pc/top1_1/中国式现代化与中华优秀传统价值观.jpg" },

    ],
    top1_1_2: [

        { title: "麦粒轰鸣", link: "https://www.cxstar.com/Book/Detail?ruid=2f27c70c00003dXXXX&packageruid=", url: "./images/pc/top1_1/麦粒轰鸣.jpg" },
        { title: "倪光南：大国匠“芯”", link: "https://www.cxstar.com/Book/Detail?ruid=27035920000c7bXXXX&packageruid=", url: "./images/pc/top1_1/倪光南：大国匠“芯”.jpg" },
        { title: "超级装备", link: "https://www.cxstar.com/Book/Detail?ruid=2cce922400009eXXXX&packageruid=", url: "./images/pc/top1_1/超级装备.jpg" },
        { title: "喜看稻菽千重浪：科学家的故事”", link: "https://www.cxstar.com/Book/Detail?ruid=2ce7546000019dXXXX&packageruid=", url: "./images/pc/top1_1/喜看稻菽千重浪：科学家的故事.jpg" },
    ],
    top1_2: [
        { title: "红色全景爱国主义教育平台", link: "http://qjsz.gxsentu.net/?c=login&m=ssoLogin&user_name=472e9bbb5933825293e1bc2080a027fd", url: "./images/pc/top1_2/红色全景爱国主义教育平台.jpg" },
    ],
    top1_2_2: [
        { title: "追光万里", link: "http://hd.yalejy.com/show/index?id=95903", url: "./images/pc/top1_2/追光万里.jpg" },
        { title: "锦绣河山", link: "http://hd.yalejy.com/show/index?id=95670", url: "./images/pc/top1_2/锦绣河山.jpg" },
        { title: "白头小书记", link: "http://hd.yalejy.com/show/index?id=95667", url: "./images/pc/top1_2/白头小书记.jpg" },
        { title: "无负今日", link: "http://hd.yalejy.com/show/index?id=95296", url: "./images/pc/top1_2/无负今日.jpg" },
        { title: "农民院士", link: "http://hd.yalejy.com/show/index?id=95079", url: "./images/pc/top1_2/农民院士.jpg" },
        { title: "八步沙", link: "http://hd.yalejy.com/show/index?id=93759", url: "./images/pc/top1_2/八步沙.jpg" },
        { title: "一点就到家", link: "http://hd.yalejy.com/show/index?id=93672", url: "./images/pc/top1_2/一点就到家.jpg" },
        { title: "夺冠", link: "http://hd.yalejy.com/show/index?id=92282", url: "./images/pc/top1_2/夺冠.jpg" },
    ],
    top1_3: [
        { title: "宝水", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&NDE1OTI", url: "./images/pc/top1_3/宝水.jpg" },
        { title: "大国脊梁：国家最高科学技术奖获得者的奋斗人生", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&MjcyNDU", url: "./images/pc/top1_3/大国脊梁：国家最高科学技术奖获得者的奋斗人生.jpg" },
        { title: "中国刑警", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&MjYyNzg", url: "./images/pc/top1_3/中国刑警.jpg" },
        { title: "种子钟扬", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&MjMzMDY", url: "./images/pc/top1_3/种子钟扬.jpg" },
        { title: "中国天眼：南仁东传", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&MjI5NDk", url: "./images/pc/top1_3/中国天眼：南仁东传.jpg" },
        { title: "勋章：共和国不会忘记", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&MjQ5NzM", url: "./images/pc/top1_3/勋章：共和国不会忘记.jpg" },
        { title: "勋章：党和人民不会忘记", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&MjQ5ODY", url: "./images/pc/top1_3/勋章：党和人民不会忘记.jpg" },
        { title: "足迹：共和国记忆", link: "https://qrcode-share.yuntuys.com/v2/?t=yt&MTIy&NDA0OTk", url: "./images/pc/top1_3/足迹：共和国记忆.jpg" },
    ],
    // 中间
    top2_1: [
        { title: "归去来兮——陶渊明诗意精神艺术展", link: "https://c.xiumi.us/stage/v5/4I8Ma/649364062#/", url: "./images/pc/top2_1/归去来兮——陶渊明诗意精神艺术展.jpg" },
    ],
     top2_s1: [
        { title: "归去来兮——陶渊明诗意精神艺术展", link: "https://c.xiumi.us/stage/v5/4I8Ma/649364062#/", url: "./images/pc/top2_1/归去来兮——陶渊明诗意精神艺术展2.jpg" },
    ],
    top2_2: [
        { title: "我们诞生在中国", link: "http://hd.yalejy.com/show/index?id=94575", url: "./images/pc/top2_2/我们诞生在中国.jpg" },
        { title: "春江水暖", link: "http://hd.yalejy.com/show/index?id=93747", url: "./images/pc/top2_2/春江水暖.jpg" },
    ],
    top2_3: [
        { title: "《优优乐游记》第一辑", link: "http://stgqzl.atleer.com/#/video?sections1Id=15&sections2Id=74", url: "./images/pc/top2_3/《优优乐游记》第一辑.jpg" },
        { title: "《优优乐游记》第二辑", link: "http://stgqzl.atleer.com/#/video?sections1Id=15&sections2Id=75", url: "./images/pc/top2_3/《优优乐游记》第二辑.jpg" },
        { title: "《优优乐游记》第三辑", link: "http://stgqzl.atleer.com/#/video?sections1Id=15&sections2Id=76", url: "./images/pc/top2_3/《优优乐游记》第三辑.jpg" },
        { title: "《优优乐游记》第四辑", link: "http://stgqzl.atleer.com/#/video?sections1Id=15&sections2Id=77", url: "./images/pc/top2_3/《优优乐游记》第四辑.jpg" },
        { title: "《优优乐游记》第五辑", link: "http://stgqzl.atleer.com/#/video?sections1Id=15&sections2Id=78", url: "./images/pc/top2_3/《优优乐游记》第五辑.jpg" },
        { title: "《优优乐游记》第六辑", link: "http://stgqzl.atleer.com/#/video?sections1Id=15&sections2Id=79", url: "./images/pc/top2_3/《优优乐游记》第六辑.jpg" },
        { title: "《优优乐游记》第七辑", link: "http://stgqzl.atleer.com/#/video?sections1Id=15&sections2Id=80", url: "./images/pc/top2_3/《优优乐游记》第七辑.jpg" },
    ],
    // 底部
    top3_1: [
        { title: "雕光刻影：皮影雕刻巨匠 汪天稳", link: "https://www.cxstar.com/Book/Detail?pinst=1ad691ca0000cc0bce&ruid=23898c72004662XXXX", url: "./images/pc/top3_1/雕光刻影：皮影雕刻巨匠 汪天稳.jpg" },
        { title: "此生只为守敦煌：常书鸿传", link: "http://www.cxstar.com/Book/Detail?pinst=1ad691ca0000cc0bce&ruid=281eb79a000003XXXX", url: "./images/pc/top3_1/此生只为守敦煌：常书鸿传.jpg" },
        { title: "故宫六百年：珍藏版", link: "http://www.cxstar.com/Book/Detail?pinst=1ad691ca0000cc0bce&ruid=2f5065d8000181XXXX", url: "./images/pc/top3_1/故宫六百年：珍藏版.jpg" },
        { title: "看见5000年：良渚王国记事", link: "http://www.cxstar.com/Book/Detail?pinst=1ad691ca0000cc0bce&ruid=281eb78e000003XXXX", url: "./images/pc/top3_1/看见5000年：良渚王国记事.jpg" },
    ],
     top3_1_2: [
        { title: "百鸟朝凤", link: "https://ebook.61read.com/shoutu/gq/14bncf/", url: "./images/pc/top3_1/百鸟朝凤.jpg" },
        { title: "封神传", link: "https://ebook.61read.com/shoutu/gq/17fsz", url: "./images/pc/top3_1/封神传.jpg" },
        { title: "梅花三弄", link: "https://ebook.61read.com/shoutu/gq/16mhsn", url: "./images/pc/top3_1/梅花三弄.jpg" },
        { title: "高山流水", link: "https://ebook.61read.com/shoutu/gq/15gsls", url: "./images/pc/top3_1/高山流水.jpg" },
    ],
     top3_2_1: [
        { title: "国韵京剧-梨园弟子", link: "https://www.clcn.net.cn/pcc/default/series?series_num=16", url: "./images/pc/top3_2/国韵京剧-梨园弟子.png" },
       
    ],
    top3_2: [
       
        { title: "梅兰芳", link: "http://hd.yalejy.com/show/index?id=93878", url: "./images/pc/top3_2/梅兰芳.jpg" },
        { title: "白蛇传·情", link: "http://hd.yalejy.com/show/index?id=95211", url: "./images/pc/top3_2/白蛇传·情.jpg" },
        { title: "孙子从美国来", link: "http://hd.yalejy.com/show/index?id=94526", url: "./images/pc/top3_2/孙子从美国来.jpg" },
        { title: "我在故宫修文物", link: "http://hd.yalejy.com/show/index?id=91250", url: "./images/pc/top3_2/我在故宫修文物.jpg" }
    ],
    // top3_3: [
    //     { title: "《红灯记》", link: "https://yueting.crc-musiconline.com/yybh5/awv80NlncList", url: "./images/pc/top3_3/《红灯记》.jpg", text: '<p>战火淬炼的音符从破碎的山河间升起，而历史从未远去。</p><p>本专辑精选若干首经典抗战歌曲，让我们循着黑胶唱纹里封存的记忆，在音符中触摸历史的温度，在回响里听见民族的脊梁。</p>' },
    // ],
};

// DOM元素加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
    // 初始化页面
    initPage();

    // 添加响应式调整
    window.addEventListener('resize', handleResize);

    // 初始调整
    handleResize();
});

// 初始化页面内容
function initPage() {

    // 创建内容区域
    var top1_1 = '';
    exhibitionData.top1_1.forEach(item => {
        top1_1 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top1_1').innerHTML = top1_1;
    document.querySelector('.stop1_1').innerHTML = top1_1;


    var top1_1_2 = '';
    exhibitionData.top1_1_2.forEach(item => {
        top1_1_2 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top1_1_2').innerHTML = top1_1_2;
    document.querySelector('.stop1_1_2').innerHTML = top1_1_2;

    var top1_2 = '';
    exhibitionData.top1_2.forEach(item => {
        top1_2 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top1_2').innerHTML = top1_2;
    document.querySelector('.stop1_2').innerHTML = top1_2;

    var top1_2_2 = '';
    exhibitionData.top1_2_2.forEach(item => {
        top1_2_2 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top1_2_2').innerHTML = top1_2_2;
    document.querySelector('.stop1_2_2').innerHTML = top1_2_2;

    var top1_3 = '';
    exhibitionData.top1_3.forEach(item => {
        top1_3 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top1_3').innerHTML = top1_3;
    document.querySelector('.stop1_3').innerHTML = top1_3;

    var top2_1 = '';
    exhibitionData.top2_1.forEach(item => {
        top2_1 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top2_1').innerHTML = top2_1;

     var top2_s1 = '';
    exhibitionData.top2_s1.forEach(item => {
        top2_s1 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.stop2_1').innerHTML = top2_s1;

    var top2_2 = '';
    exhibitionData.top2_2.forEach(item => {
        top2_2 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top2_2').innerHTML = top2_2;
    document.querySelector('.stop2_2').innerHTML = top2_2;

    var top2_3 = '';
    exhibitionData.top2_3.forEach(item => {
        top2_3 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    console.log("ddd",top2_3);
    
    document.querySelector('.top2_3').innerHTML = top2_3;
    document.querySelector('.stop2_3').innerHTML = top2_3;


    var top3_1 = '';
    exhibitionData.top3_1.forEach(item => {
        top3_1 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top3_1').innerHTML = top3_1;
    document.querySelector('.stop3_1').innerHTML = top3_1;

        var top3_1_2 = '';
    exhibitionData.top3_1_2.forEach(item => {
        top3_1_2 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top3_1_2').innerHTML = top3_1_2;
    document.querySelector('.stop3_1_2').innerHTML = top3_1_2;

        var top3_2_1 = '';
    exhibitionData.top3_2_1.forEach(item => {
        top3_2_1 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    document.querySelector('.top3_2_1').innerHTML = top3_2_1;
    document.querySelector('.stop3_2_1').innerHTML = top3_2_1;

    var top3_2 = '';


    // 去掉第一个
    let temp = exhibitionData.top3_2;

    temp.forEach(item => {
        top3_2 += `
            <a href="${item.link}" title="${item.title}" target="_blank" class="book-item">
                <img src="${item.url}">
                <p>${item.title}</p>
            </a>
            `;
    });
    top3_2 += `</div>`;
    document.querySelector('.top3_2').innerHTML = top3_2;
    document.querySelector('.stop3_2').innerHTML = top3_2;



    var top3_3 = `<a title="${exhibitionData.top3_3[0].title}" href=" ${exhibitionData.top3_3[0].link}" target="_blank">
                            <img src="${exhibitionData.top3_3[0].url}" class="v_box_bj">
                            <div class="v_box_name">
                                ${exhibitionData.top3_3[0].title}
                            </div>
                            <div class="v_box_main">
                               ${exhibitionData.top3_3[0].text}
                            </div>
                        </a>`;
    document.querySelector('.top3_3').innerHTML = top3_3;
    document.querySelector('.stop3_3').innerHTML = top3_3;
}

// 处理窗口大小变化
function handleResize() {
    const isMobile = window.innerWidth <= 768;
    const desktopSliders = document.querySelectorAll('.content-slider');
    const mobileSliders = document.querySelectorAll('.mobile-container');

    desktopSliders.forEach(slider => {
        slider.style.display = isMobile ? 'none' : 'block';
    });

    mobileSliders.forEach(slider => {
        slider.style.display = isMobile ? 'block' : 'none';
    });
}

function initSwiper() {


    const swiper1 = new Swiper('.mySwiper1', {

        initialSlide: 0,

        // 布局配置
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        spaceBetween: 0,
        // 解决3个卡片时的循环问题
        loopAdditionalSlides: 0,
        loopedSlides: 3,

        // 导航按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 初始化回调，确保布局正确
        on: {
            init: function () {
                // 强制刷新布局
                this.update();

                // 处理3个卡片的特殊情况
                if (this.slides.length <= 2) {
                    // 复制卡片确保循环显示
                    const originalSlides = Array.from(this.slides).slice(0, this.slides.length);
                    originalSlides.forEach(slide => {
                        const clone = slide.cloneNode(true);
                        this.wrapperEl.appendChild(clone);
                    });
                    this.update();
                }
            },


            slideChangeTransitionEnd: function () {
                this.update();
            }
        }
    });

    const swiper2 = new Swiper('.mySwiper2', {

        initialSlide: 0,

        // 布局配置
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        spaceBetween: 0,

        // 解决3个卡片时的循环问题
        loopAdditionalSlides: 0,
        loopedSlides:1,

        // 导航按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 初始化回调，确保布局正确
        on: {
            init: function () {
                // 强制刷新布局
                this.update();

                // 处理3个卡片的特殊情况
                // if (this.slides.length <= 2) {
                //     // 复制卡片确保循环显示
                //     const originalSlides = Array.from(this.slides).slice(0, this.slides.length);
                //     originalSlides.forEach(slide => {
                //         const clone = slide.cloneNode(true);
                //         this.wrapperEl.appendChild(clone);
                //     });
                //     this.update();
                // }
            },


            slideChangeTransitionEnd: function () {
                this.update();
            }
        }
    });

    const swiper3 = new Swiper('.mySwiper3', {

        initialSlide: 0,

        // 布局配置
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        spaceBetween: 0,

        // 解决3个卡片时的循环问题
        loopAdditionalSlides: 0,
        loopedSlides: 3,

        // 导航按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 初始化回调，确保布局正确
        on: {
            init: function () {
                // 强制刷新布局
                this.update();

                // 处理3个卡片的特殊情况
                if (this.slides.length <= 3) {
                    // 复制卡片确保循环显示
                    const originalSlides = Array.from(this.slides).slice(0, this.slides.length);
                    originalSlides.forEach(slide => {
                        const clone = slide.cloneNode(true);
                        this.wrapperEl.appendChild(clone);
                    });
                    this.update();
                }
            },


            slideChangeTransitionEnd: function () {
                this.update();
            }
        }
    });
}

setTimeout(function () {
    initSwiper();
}, 300);
setTimeout(function () {
    document.querySelector('.main').style.opacity = '1';
}, 500);

